<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>密码强弱</title>
    <style>
      .box {
        margin: 0 auto;
        margin-top: 200px;
        text-align: center;
      }

      input {
        outline: none;

        border: 1px solid rgb(0, 174, 255);
        width: 250px;
        height: 15px;
        padding: 5px;
      }

      .input {
        position: relative;
      }

      .input div {
        position: absolute;
        right: 0;
        display: flex;
        margin-top: 5px;
      }

      .input div span {
        width: 20px;
        height: 5px;
        border: 1px solid #ccc;
        margin-left: 5px;
      }
      .pswClass {
        font-size: 13px;
        color: red;
        text-align: center;
        width: 65px;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <label for="" class="input">
        密码：<input type="password" onblur="upperCase()" />
        <div>
          <span> </span>
          <span> </span>
          <span> </span>
          <div class="pswClass">密码强度</div>
        </div>
      </label>
    </div>

    <script>
      let input = document.getElementsByTagName("input")[0];
      let span = document.querySelectorAll("span");

      input.oninput = function () {
        for (let i = 0; i < span.length; i++) {
          span[i].style.background = "";
          if (i < a(this.value)) {
            span[i].style.background = "#43ff05";
          }
        }
      };
      const a = (e) => {
        let num = 0;

        if (e.match(/\d/g)) {
          num++;
        }
        if (e.match(/[a-z]/gi)) {
          num++;
        }
        if (
          e.match(
            "[`~!@#$^&*()=|{}':;',\\[\\].<>《》./~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
          )
        ) {
          num++;
        }
        return num;
      };
    </script>
  </body>
</html>
